<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Class: WalkThroughPlugin</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Class: WalkThroughPlugin</h1>

    




<section>

<header>
    
        <h2><span class="attribs"><span class="type-signature"></span></span>WalkThroughPlugin<span class="signature">()</span><span class="type-signature"></span></h2>
        
    
</header>

<article>
    <div class="container-overview">
    
        

    

    
    <h4 class="name" id="WalkThroughPlugin"><span class="type-signature"></span>new WalkThroughPlugin<span class="signature">()</span><span class="type-signature"></span></h4>
    

    



<div class="description">
    WalkThrough插件的实现，是利用保存一系列相机视角（position,lookat），配合tweenjs的动画来实现漫游效果
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    
    <dt class="tag-author">Author:</dt>
    <dd class="tag-author">
        <ul>
            <li>Mao Weiqing</li>
        </ul>
    </dd>
    

    

    

    

    

    

    

    
</dl>




















    
    </div>

    

    

    

    

    

    

    

    
        <h3 class="subsection-title">Methods</h3>

        
            

    

    
    <h4 class="name" id="createPath"><span class="type-signature"></span>createPath<span class="signature">(interPoints, startCallback<span class="signature-attributes">opt</span>, updateCallback<span class="signature-attributes">opt</span>, stopCallback<span class="signature-attributes">opt</span>, completeCallback<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
    

    



<div class="description">
    该方法是根据漫游路径点数组去创建漫游路径，该方法会自动创建与路径点区间个数相应的动画，并按顺序播放，所以在该函数调用成功后，你可以调用walkThrough中动画相关的方法，如start、st等
<br> 但我们不建议此时立即去调用开始动画的方法，这样的动画会很卡顿，我们建议你可以在调用view.walkThrough.prepareView方法后，在prepareView的回调函数中去调用开始动画的函数
</div>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        
        <th>Default</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>interPoints</code></td>
            

            <td class="type">
            
                
<span class="param-type">Array</span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            
                <td class="default">
                
                </td>
            

            <td class="description last">由PathPoint对象路径点构成的数组</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>startCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    {undefined}
                
                </td>
            

            <td class="description last">注意：该回调函数会在每一段动画都会触发</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>updateCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    {undefined}
                
                </td>
            

            <td class="description last">注意：该回调函数也会在每一段动画都会触发</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>stopCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    {undefined}
                
                </td>
            

            <td class="description last">注意：该回调函数会在停止的那一段动画上触发一次</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>completeCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    {undefined}
                
                </td>
            

            <td class="description last">注意：该回调函数只会在所有动画都结束才会触发，并且只触发一次</td>
        </tr>

    
    </tbody>
</table>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>




















        
            

    

    
    <h4 class="name" id="isPaused"><span class="type-signature"></span>isPaused<span class="signature">()</span><span class="type-signature"> &rarr; {Boolean}</span></h4>
    

    



<div class="description">
    该方法用来查询当前漫游路径动画中是否有动画正处于暂停的状态
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>















<h5>Returns:</h5>

        
<div class="param-desc">
    true代表当前有动画正在暂停，false代表没有正在暂停的动画
</div>



<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">Boolean</span>


    </dd>
</dl>

    





        
            

    

    
    <h4 class="name" id="isPlaying"><span class="type-signature"></span>isPlaying<span class="signature">()</span><span class="type-signature"> &rarr; {Boolean}</span></h4>
    

    



<div class="description">
    该方法用来查询当前漫游路径动画是否正在播放的状态
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>















<h5>Returns:</h5>

        
<div class="param-desc">
    true代表当前有动画正在播放，false代表没有正在播放的动画
</div>



<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">Boolean</span>


    </dd>
</dl>

    





        
            

    

    
    <h4 class="name" id="PathPoint"><span class="type-signature"></span>PathPoint<span class="signature">(position, lookat, duration)</span><span class="type-signature"></span></h4>
    

    



<div class="description">
    漫游路径点类，创建方式：
<br> let point = new viewer.walkThrough.PathPoint(position, lookat, duration);
</div>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>position</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            

            <td class="description last">示例：{x:0, y:0, z: 0}</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>lookat</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            

            <td class="description last">示例：{x:0, y:0, z: 0}</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>duration</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last">单位：毫秒  示例：1000</td>
        </tr>

    
    </tbody>
</table>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>




















        
            

    

    
    <h4 class="name" id="pause"><span class="type-signature"></span>pause<span class="signature">()</span><span class="type-signature"></span></h4>
    

    



<div class="description">
    该方法用来开始暂停漫游动画，你可以调用resume方法来继续当前暂停动画的播放
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>




















        
            

    

    
    <h4 class="name" id="prepareView"><span class="type-signature"></span>prepareView<span class="signature">(interPoints, step<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
    

    



<div class="description">
    该方法会根据漫游路径点去准备视角，该方法是为了解决在调用createPath方法后开始动画卡顿问题
<br> 我们建议你可以在调用view.walkThrough.prepareView方法后，在prepareView的回调函数中去调用开始动画的函数，这样的动画会很流畅
</div>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        
        <th>Default</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>interPoints</code></td>
            

            <td class="type">
            
                
<span class="param-type">Array</span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            
                <td class="default">
                
                </td>
            

            <td class="description last">由PathPoint对象路径点构成的数组</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>step</code></td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    1
                
                </td>
            

            <td class="description last">单位:米， 表示相邻两个路径点之间的距离（length) 按照 step来划分，划分次数 = length / step |  结论：step越小，划分次数越多，动画越顺畅</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>callback</code></td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    {undefined}
                
                </td>
            

            <td class="description last">在视角准备完成后的回调函数，通常我们都会在视角准备完成后直接调用 viewer.walkThrough.start 来开始动画</td>
        </tr>

    
    </tbody>
</table>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>




















        
            

    

    
    <h4 class="name" id="repeat"><span class="type-signature"></span>repeat<span class="signature">()</span><span class="type-signature"></span></h4>
    

    



<div class="description">
    该方法可以用来重复最近一次的漫游路径的动画
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>




















        
            

    

    
    <h4 class="name" id="resume"><span class="type-signature"></span>resume<span class="signature">()</span><span class="type-signature"></span></h4>
    

    



<div class="description">
    该方法用来开始继续之前暂停漫游动画
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>




















        
            

    

    
    <h4 class="name" id="start"><span class="type-signature"></span>start<span class="signature">()</span><span class="type-signature"></span></h4>
    

    



<div class="description">
    该方法用来开始播放漫游动画
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>




















        
            

    

    
    <h4 class="name" id="stop"><span class="type-signature"></span>stop<span class="signature">()</span><span class="type-signature"></span></h4>
    

    



<div class="description">
    该方法用来开始停止漫游动画,注意调用该方法后，后续的动画都将不会执行，即使你调用resume也不会继续
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>




















        
    

    

    
</article>

</section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BimrunSceneModel.html">BimrunSceneModel</a></li><li><a href="EnvEffectsPlugin.html">EnvEffectsPlugin</a></li><li><a href="Fence.html">Fence</a></li><li><a href="HeatmapPlugin-Heatmap.html">Heatmap</a></li><li><a href="SpritePlugin-BimrunSprite.html">BimrunSprite</a></li><li><a href="SpritePlugin-SpriteContainer.html">SpriteContainer</a></li><li><a href="Viewer.html">Viewer</a></li><li><a href="WalkThroughPlugin.html">WalkThroughPlugin</a></li></ul><h3>Global</h3><ul><li><a href="global.html#Events">Events</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 26 2021 13:42:33 GMT+0800 (中国标准时间)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>